<!-- 添加面板 -->
<script setup>
import { reactive, ref } from "vue";
import { useDormitoryStore } from '@/store/super-manger/dormitory'
import { storeToRefs } from "pinia";
import { submitFormApi, isDormitoryUsedApi } from '@/service/dormitory'
import { showElMessage } from '@/utils/showTipMessage'
import { useCommonStore } from '@/store/commonStore'
import eventBus from '@/utils/eventBus'

const dormitoryStore = useDormitoryStore();
const commonStore = useCommonStore();
const { isShowDormitoryPanel, panelTitle, buildings, isUsed } = storeToRefs(dormitoryStore);
const { isShowTipInfo, tipInfoContent, oplationType } = storeToRefs(commonStore);

const form = reactive({
    building: '',
    room_name: '',
    dormitory_type: 4
})
const ruleFormRef = ref(null);
// 自定义校验规则
const rules = ref({
    building: [{ required: true, message: '请选择宿舍楼', trigger: 'change' }],
    room_name: [{ required: true, message: '宿舍号不能为空', trigger: 'blur' }],
    dormitory_type: [{ required: true, message: '请选择宿舍号', trigger: 'change' }],
});

// 提交按钮点击
const submitForm = async(formEl) => {
    if (!formEl) return;
    await formEl.validate(valid => {
        if (valid && !isUsed.value) {
            isShowTipInfo.value = true;
            tipInfoContent.value = `确定添加宿舍【${form.building}-${form.room_name}】吗？添加后将不能修改~`
            oplationType.value = ''; 
        }
    })
}
eventBus.on('determineBtnClick', function() {
    // 发送网络请求提交表单数据
    handleRequest()
})
async function handleRequest() {
    const res = await submitFormApi(form)
    const { code } = res.data;
    if (code ) {    // 新增数据成功
        isShowDormitoryPanel.value = false
        showElMessage(`宿舍【${form.building}-${form.room_name}】新增成功！`);
    }
}

// 检测输入的宿舍号是否可用
const checkDormitoryUsed = async() => {
    // 发送网络请求
    const res = await isDormitoryUsedApi(form.building, form.room_name);
    const { code } = res.data;
    if (code) {    // 表示该宿舍号已经被使用
        isUsed.value = true;
        return;
    }
    isUsed.value = false;
}
</script>

<template>
  <div class="add_dormitory">
    <el-dialog 
        v-model="isShowDormitoryPanel" 
        :title="panelTitle"
        align-center
        :close-on-click-modal="false"
        width="400"
    >
        <el-form    
            :model="form"
            ref="ruleFormRef"
            :rules="rules"
        >
            <el-form-item label="宿舍楼：" prop="building">
                <el-select 
                    v-model="form.building" 
                    placeholder="请选择宿舍楼"
                >
                    <template v-for="item of buildings" :key="item.id">
                        <el-option :label="item.building_name + '号楼'" :value="item.building_name" />
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="宿舍号：" prop="room_name">
                <el-input 
                    v-model="form.room_name" 
                    placeholder="请输入宿舍号" 
                    @blur="checkDormitoryUsed"
                    :class="isUsed ? 'errorStyle': ''"
                />
                <transition name="showTips">  
                    <template v-if="isUsed">
                        <span class="error_tip">该宿舍号已经存在，请更换宿舍号！</span>
                    </template>
                </transition>
            </el-form-item>
            <el-form-item label="宿舍类型：" prop="dormitory_type">
                <el-select 
                    v-model="form.dormitory_type" 
                    placeholder="请选择宿舍类型" 
                >
                    <template v-for="item of [4, 6, 8]" :key="item">
                        <el-option :label="`${item} 人间`" :value="item" />
                    </template>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button 
                    type="success" 
                    plain 
                    class="submitBtn" 
                    @click="submitForm(ruleFormRef)"
                >提交</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </div>
        </template>
    </el-dialog>   
  </div>
</template>

<style scoped lang="less">
.el-input {
    width: 120px;
}

</style>